<template>
  <div>
      <Card>
    <TypographyTitle :level="3">{{wrapperTitle}}</TypographyTitle>
    <TypographyText disabled>{{wrapperTitle?'':'请在左侧选择一个追踪数据'}}</TypographyText>
      <Descriptions size="small" :column="2">
        <DescriptionsItem label="起始时间">{{ startTime }}</DescriptionsItem>
        <DescriptionsItem label="持续时间">
          {{ durationTime }}
        </DescriptionsItem>
        <DescriptionsItem label="跨度">{{ spansCount }}</DescriptionsItem>
        <DescriptionsItem label="追踪ID"
          ><TypographyParagraph copyable>{{ traceShowId }}</TypographyParagraph></DescriptionsItem
        >
      </Descriptions>
      </Card>
  </div>
</template>
<script lang="ts" setup>
import {
  TypographyParagraph,
  TypographyText,
  TypographyTitle,
  Card,
  Descriptions,
  DescriptionsItem,
} from 'ant-design-vue';
import { ref } from 'vue';
const wrapperTitle = ref();
const traceShowId = ref();
const durationTime = ref();
const spansCount = ref();
const startTime = ref();
const setInfo = (spansNum, traceId, title, duration, start) => {
  traceShowId.value = traceId;
  wrapperTitle.value = title;
  durationTime.value = duration;
  spansCount.value = spansNum;
  startTime.value = start;
};
const clearInfo=()=>{
    wrapperTitle.value=undefined;
    traceShowId.value=undefined;
    durationTime.value=undefined;
    spansCount.value=undefined;
    startTime.value=undefined;
}
defineExpose({setInfo,clearInfo});
</script>
<style lang="less">
.ant-descriptions-item {
  width: 50px;
}
.ant-descriptions-item-content {
  width: 50px;
}
.ant-page-header {
  padding: 5px 24px;
}
</style>
